<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>输入框组件 - ref方法</title>
</head>

<body>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    输入框组件：
    <ul>
        <li>默认值</li>
    </ul>
    <div id="app">
        <my-input ref="childRef" mark="header" default="11122" />


        <hr />
        测试： {{obj.input.one}}
        <hr />
        您输入的内容是：{{obj.input.header}}
        <hr />

    </div>

    <script>
        const App = Vue.createApp({
            setup() {
                const obj = Vue.reactive({
                    input: {
                        one: "222"
                    }
                });
                const childRef = Vue.ref(null);


                Vue.onMounted(() => {
                    //dom加载后再获取

                    const shuaxing = () => {
                        obj.input[childRef.value.mark] = childRef.value.textheader;
                    }
                    setInterval(() => { shuaxing() }, 1000)
                });
                return {
                    obj,
                    childRef
                }
            }
        })
        const inutvue = {
            /*
            *  mark:标记（必填）
            *  default：输入框的默认值
            */
            props: {
                mark: {
                    type: String,
                    required: true,
                },
                default: {
                    type: String,
                    default: "默认值"
                }
            },
            setup(props, { }) {
                console.log("子组件的ref", props.ref)
                console.log("子组件的mark", props.mark)
                let mark = Vue.ref("")
                mark.value = props.mark;
                let textheader = Vue.ref("");
                textheader.value = props.default;



                return {
                    textheader,
                    mark,


                };
            },

            template: `<input v-model="textheader" />您输入的内容是：{{textheader}},标记是{{mark}}<br />`,
        };
        App.component("my-input", inutvue);
        App.mount("#app");
    </script>

</body>

</html>